<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <button id="btn-change">change</button>
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
    <script>
        const data = [{
            name: 'peter',
            age: '20',
            address: '北京'
        },
        {
            name: 'bob',
            age: '18',
            address: '武汉'
        },
        {
            name: 'lisa',
            age: '19',
            address: '南昌'
        }
    ];
    // data.unshift({name: '姓名', age: '年龄', address: '地址'});
    // 渲染函数
    const render = (data) => {
        const $container = $('#container');
        $container.html('');
        const $table = $('<table>');
        // 重绘一次
        $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'));
        data.forEach(item => {
            // 每次进入都要重绘
            $table.append($(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.address}</td></tr>`))
        });
        $container.append($table);
    }

    $('#btn-change').click(() => {
        data[1].age = 30;
        data[2].address = '上海';
        render(data);
    });
    </script>
</body>
</html>